<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>
    <script src="js/content.min.js?v=1.0.0"></script>
    <script src="js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
    <script src="js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
    <script type="text/javascript" src="js/table.js" charset="UTF-8"></script>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-treegrid/0.2.0/css/jquery.treegrid.min.css">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <script src="js/vue.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-table/1.12.0/extensions/treegrid/bootstrap-table-treegrid.js"></script>
    <script src="https://cdn.bootcss.com/jquery-treegrid/0.2.0/js/jquery.treegrid.min.js"></script>
    <script src="js/tree.js"></script>
    <script src="js/qrious.min.js"></script>

</head>
<body class="gray-bg">
<div id="app">

   <!-- <div class="checkout-steps">
        <div class="fl weixin">微信支付</div>
        <div class="fl sao">
            <p class="red"></p>
            <div class="fl code">
                <img src="" id="qrious">
                <!--<static/img/ id="qrious">&ndash;&gt;
                <div class="saosao">
                    <p>请使用微信扫一扫</p>
                    <p>扫描二维码支付</p>
                </div>
            </div>
            <div class="fl phone">

            </div>

        </div>
        <div class="clearfix"></div>
        <p><a href="pay.html" target="_blank">> 其他支付方式</a></p>
    </div>-->

    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="ibox float-e-margins">

            <div class="col-sm-12">
                <!-- Example Events -->
                <div class="example-wrap">
                    <!--<h4 class="example-title">事件</h4>
                    <div class="example">
                        <div class="alert alert-success" id="examplebtTableEventsResult" role="alert">
                            事件结果
                        </div>-->
                        <div class="btn-group hidden-xs" id="toolbar" role="group">
                            <button type="button" @click="addModel" class="btn btn-outline btn-default">
                                <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
                            </button>
                            <button type="button"  class="btn btn-outline btn-default">
                                <i class="glyphicon glyphicon-heart" aria-hidden="true"></i>
                            </button>
                            <button type="button" id="delBatch" class="btn btn-outline btn-default">
                                <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
                            </button>
                        </div>
                        <table id="table" data-height="600" data-mobile-responsive="true">

                        </table>
                    </div>
                </div>
                <!-- End Example Events -->
            </div>
        </div>

    <!-- End Panel Other -->

    <!-- 添加模态框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel"><span>新增</span></h4>
                </div>
                <form id="formDataAdd">
                <div class="modal-body">
                    <div class="form-group">
                        <label>账号</label>
                        <input type="text" v-model="userName" class="form-control"  required placeholder="请输入账号">
                    </div>
                    <div class="form-group">
                        <label>密码</label>
                        <input type="password" v-model="password" class="form-control" required placeholder="请输入密码">
                    </div>
                    <div class="form-group">
                        <label>姓名</label>
                        <input type="text" v-model="fullName" class="form-control" required placeholder="请输入姓名">
                    </div>
                    <div class="form-group">
                        <label >内联复选框</label></br>
                        <div class="">
                            <label  v-for="role in roleList" :key="role.roleId">
                                <input type="checkbox" v-model="checkNames" :value="role.roleId">{{role.roleName}}&nbsp;&nbsp;&nbsp;
                            </label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭
                        </button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal" @click.stop="save">
                            <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存
                        </button>
                    </div>
                </div>
                </form>
            </div>
        </div>
    </div>


    <!-- 修改模态框 -->
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel"><span>修改</span></h4>
                </div>
                <form id="formDataEdit">
                <div class="modal-body">
                    <div class="form-group">
                        <label>账号</label>
                        <input type="text" name="userName" class="form-control" id="userName" required placeholder="请输入账号">
                        <input type="hidden" name="userId" class="form-control" id="userId" placeholder="用户id">
                        <input type="hidden" name="_method" class="form-control" value="put">
                    </div>
                    <div class="form-group">
                        <label>密码</label>
                        <input type="password" name="password" class="form-control" id="password" required placeholder="请输入密码">
                    </div>
                    <div class="form-group">
                        <label>姓名</label>
                        <input type="text" name="fullName" class="form-control" id="fullName" required placeholder="请输入姓名">
                    </div>
                    <div class="form-group">
                        <label >内联复选框</label></br>
                        <div class="">{{checkNames}}|| {{checkIds}}
                            <label  v-for="role in roleList" :key="role.roleId">
                                <input type="checkbox" v-model="checkNames"  :value="role.roleId">{{role.roleName}}&nbsp;&nbsp;&nbsp;
                                <input type="text" v-model="checkIds"  id="editCheck">
                            </label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭
                        </button>
                        <button type="button" id="edit" class="btn btn-primary" data-dismiss="modal">
                            <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存
                        </button>
                    </div>
                </div>
                </form>
            </div>
        </div>
    </div>


</div>

</div>

<script type="text/javascript">


    //修改模态框
    function EditViewById(id) {
        $('#editModal').modal();

        $.ajax({
            url: 'http://127.0.0.1:8085/sysUserRole/' + id,
            dataType: 'json',
            type: 'get',
            data: {},
            success: function (data) {
                if (data != null) {
                    $("#editCheck").val(data);
                }
            }
        })

        $.ajax({
            url: 'http://127.0.0.1:8085/sysUser/' + id,
            dataType: 'json',
            type: 'get',
            data: {},
            success: function (data) {
                console.log(data)
                if (data != null) {
                    $("#userName").val(data.userName);
                    $("#fullName").val(data.fullName);
                    $("#password").val(data.password);
                    $("#userId").val(data.userId);
                    $("#table").bootstrapTable('refresh');
                }
            }
        })
    }


    var defaultColunms = [
        {
            field: 'checkStatus',
            checkbox: true
        },  //给多选框赋一个field值为“checkStatus”用于更改选择状态!!!!!

        {
            field: 'userId',
            title: 'id',
            align: 'center'
        }, {
            field: 'userName',
            title: '账号',
            align: 'center'
        },  {
            field: 'fullName',
            title: '姓名',
            align: 'center'
        },{
            field: 'ad',
            title: '操作',
            align: 'center',
            formatter: function (value, row, index) {
                var result = "";
                // result += "<a href='javascript:;' class='btn btn-xs green' onclick=\"EditViewById('" + row.userId + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";
                result += "<a href='javascript:;' class='btn btn-xs blue'  onclick=\"EditViewById('" + row.userId + "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
                result += "<a href='javascript:;' class='btn btn-xs red'  title='删除'  onclick=\"DelViewById('" + row.userId + "')\"><span class='glyphicon glyphicon-remove'></span></a>";
                return result;
            }
        }];




    $(function () {
        //1.初始化Table
        var oTable = new TableInit('#table', 'http://127.0.0.1:8085/sysUser', defaultColunms,$("#userName").val());
        oTable.Init();

        //2.初始化Button的点击事件
        var oButtonInit = new ButtonInit();
        oButtonInit.Init();


        //修改
        $("#edit").on("click", function () {
            $.ajax({
                url: 'http://127.0.0.1:8085/sysUser',
                dataType: 'json',
                type: 'post',
                data: $("#formDataEdit").serialize(),
                success: function (data) {
                    if (data == true) {
                        $("#table").bootstrapTable('refresh');
                    }
                }
            })
        });



        //删除按钮事件
        $("#delBatch").on("click", function () {
            var rows = $("#table").bootstrapTable('getSelections');
            if (rows.length == 0) {// rows 主要是为了判断是否选中，下面的else内容才是主要
                alert("请先选择要删除的记录!");
                return;
            } else {
                var arrays = new Array();// 声明一个数组
                $(rows).each(function () {// 通过获得别选中的来进行遍历
                    arrays.push(this.userId);// cid为获得到的整条数据中的一列
                });
                var ids = arrays.join(','); // 获得要删除的id
                // 批量删除
               del(ids);
            }
        })

    });

    //注册删除按钮的事件
    function DelViewById(ids) {
        del(ids);
    }

    function del(ids) {
        $.ajax({
            url: "http://127.0.0.1:8085/sysUser/" + ids,
            type: "POST",
            dataType: "json",
            data: {_method: "delete"},
            success: function (data) {
                if (data == true) {
                    $("#table").bootstrapTable('refresh');
                }
            }
        })
    }
    console.log(2)
    var vm = new Vue({
        el: '#app',
        data: {
            userName: '',
            flag: true,
            password:'',
            fullName:'',
            roleList: {},
            checkNames:[],
            checkIds:[]
        },
        beforeCreate() {

        },
        methods: {
            addModel() {
                $('#myModal').modal();
            },
            save() {
                this.$http.post('http://127.0.0.1:8085/sysUser', {userName: this.userName,fullName:this.fullName,password:this.password,ids:this.checkNames.toString()}, {emulateJSON: true}).then(function (res) {
                    if (res.status == 200) {
                        $("#myModal").modal('hide');
                        $("#table").bootstrapTable('refresh');
                    }
                }, function (res) {
                    console.log(res.status);
                });
            },
            getRoles() {
                this.$http.get('http://127.0.0.1:8085/sysRole/list').then(function (res) {
                    if (res.status == 200) {
                        this.roleList = res.body;
                    }
                }, function (res) {
                    console.log(res.status);
                });
            },
            createNative(){
                this.$http.get('http://127.0.0.1:8085/pay/createNative').then(function (res) {
                    console.log(res);
                    //生成二维码
                    var qr=new QRious({
                        element:document.getElementById('qrious'),
                        size:250,
                        value:res.body.code_url,
                        level:'H'
                    });
                }, function (res) {
                    console.log(res.status);
                });
            },

            edi() {
                $('#myModal').modal();
            }

        },
        // 渲染后执行
        mounted() {
            // this.getMenus(); // 调用数据初始化函数
           this.createNative();
            this.getRoles();
            this.checkNames = this.checkIds;
        },
        watch: {
            // 如果 `checkIds` 发生改变，这个函数就会运行
            checkIds: function (newQuestion, oldQuestion) {
                console.log(newQuestion   +   oldQuestion   + this.checkIds )
                this.checkNames = this.checkIds;
            }
        },
    })

</script>

</body>
</html>